<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Alert show-icon type="warning">
                            路由配置是非常专业的事情，不建议非工程师操作
                        </Alert>
                    </Row>
                    <Row class="operation">
                        <Button @click="add" icon="md-add" type="primary">添加</Button>
                        <Button @click="save()" icon="ios-create-outline" type="primary">保存</Button>
                        <Button @click="getList" icon="md-refresh">刷新</Button>
                    </Row>
                    <br>
                    <Row>
                        <Table :columns="columns" :data="data" :loading="loading"
                               border ref="table">
                            <template slot="action" slot-scope="{ row, index }">
                                <Button @click="edit(row,index)" size="small" style="margin-right:5px" type="primary">编辑
                                </Button>
                                <Button @click="remove(row,index)" size="small" type="error">删除</Button>
                            </template>
                        </Table>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500" :styles="{top: '90px'}">
            <Form ref="routeForm" :model="routeForm" :label-width="70" :rules="routeFormValidate">
                <FormItem label="路由名" prop="routeName">
                    <Input v-model="routeForm.routeName" autocomplete="off"/>
                </FormItem>
                <FormItem label="路由ID" prop="routeId">
                    <Input v-model="routeForm.routeId" autocomplete="off"/>
                </FormItem>
                <FormItem label="请求路径" prop="path">
                    <Input v-model="routeForm.path" autocomplete="off"/>
                </FormItem>
                <FormItem label="目标URI" prop="uri">
                    <Input v-model="routeForm.uri" autocomplete="off"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary"  @click="okClick">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {fetchList,putObj} from '@/projects/basic/api/admin/router'
    import {deepClone} from '@/libs/utils/ObjectClone'
    let defaultPredicates = [{"args":{"_genkey_0":""},"name":"Path"}];
    export default {
        name: "router_config",
        data() {
            return {
                loading:false,
                data:[],
                modalTitle:'',
                modalVisible:false,
                submitLoading:false,
                routeForm:{
                    id:'',
                    routeName:'',
                    routeId:'',
                    path:'',
                    uri:'',
                    filters:[],
                    predicates:[],
                    order:0,
                },
                routeFormValidate: {
                    routeName: [
                        {required: true, message: "路由名称不能为空", trigger: "blur"}
                    ],
                    routeId: [
                        {required: true, message: "路由ID不能为空", trigger: "blur"}
                    ],
                    path: [
                        {required: true, message: "请求路径不能为空", trigger: "blur"}
                    ],
                    uri: [
                        {required: true, message: "目标地址不能为空", trigger: "blur"},
                    ]
                },
                columns: [
                    {
                        title: "路由名",
                        key: "routeName",
                        minWidth: 120,
                        fixed: "left"
                    },
                    {
                        title: "路由ID",
                        key: "routeId",
                        minWidth: 145,
                        fixed: "left",
                        ellipsis: true,
                        tooltip: true
                    },
                    {
                        title: "请求路径",
                        key: "path",
                        minWidth: 120
                    },
                    {
                        title: "目标URI",
                        key: "uri",
                        minWidth: 120
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: "修改时间",
                        key: "updateTime",
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 200,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ]
            }
        },

        created() {
            this.getList()
        },

        methods: {
            cancel(){
                this.modalTitle = "";
                if(this.routeForm.new_){
                    this.data.splice(this.data.length-1,1);
                }
                this.modalVisible = false;
            },
            okClick(){
                let self = this;
                self.$refs.routeForm.validate(validate=>{
                    if(validate){
                        self.modalVisible  = false;
                    }else{
                        self.$Message.error("数据错误");
                    }
                })
            },
            getList() {
                fetchList().then(response => {
                    let result = response.data;
                    let temp=[];
                    response.data.forEach(route=>{
                        if (route.predicates) {
                            let predicates = route.predicates;
                            route.predicates = JSON.parse(predicates)
                            route.path = route.predicates[0].args['_genkey_0'];
                        }
                        temp.push(route);
                    })
                    this.json = result
                    this.data.splice(0,this.data.length);
                    this.data.push(...temp);
                })
            },
            add() {
                this.modalTitle = "添加路由";
                this.data.push({
                    new_:true,
                    routeName:'',
                    routeId:'',
                    path:'',
                    uri:'',
                    filters:[],
                    predicates:deepClone(defaultPredicates),
                    order:0,
                })
                this.routeForm = this.data[this.data.length-1];
                this.modalVisible = true;
            },
            remove(row,index){
                let self = this;
                self.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除路由 " + row.routeName + " ?",
                    onOk: () => {
                        self.data.splice(index,1);
                    }
                });
            },
            edit(row,index){
                this.modalTitle = row.routeName+'编辑';
                this.routeForm = this.data[index];
                this.modalVisible = true;
            },
            save(){
                this.data.forEach(route=>{
                    route.predicates[0].args['_genkey_0'] = route.path;
                })
                putObj(this.data).then(response => {
                    this.$Message.success("操作成功");
                })
            }
        }
    }
</script>
